<script setup>
  import {ref} from "vue";
  import router from "@/router/index.js";
  import axios from "axios";
  import {httpUrl} from "@/main.js";
  import {ElMessage} from "element-plus";

  const userInput = ref();
  const confirm_disabled = ref(false);
  const loginFormRef = ref({})
  const loginForm = ref({
    no: '',
    pwd: ''
  })
  const rules = ref({
    no: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (loginForm.value.no) {
              try {
                axios.get(httpUrl + '/user/findByNo?no=' + loginForm.value.no).then((res) => res.data).then((res) => {
                  console.log(res);
                  if (res.code == 200) {
                    callback()
                  } else {
                    callback(new Error("账号不存在"))
                  }
                });
              } catch (error) {
                console.log(error);
              }
          }
        }, trigger: 'blur'
      }
    ],
    pwd: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 30, message: '密码长度不能小于6个字符,不能大于30字符', trigger: 'blur' },
    ]
  })

  const confirm = function () {
    confirm_disabled.value = true
    loginFormRef.value.validate(valid => {
      if (valid) {
        console.log("表单验证成功")
        axios.get(httpUrl + '/captcha/check?captcha=' + userInput.value).then((res) => {
          console.log(res.data.code)
          if (res.data.code === 0) {
            axios.post(httpUrl + '/user/login', loginForm.value).then((res2) => res2.data).then((res2) => {
              console.log(res2)
              if (res2.code === 200) {
                sessionStorage.setItem('CurUser', JSON.stringify(res2.data))
                router.replace('/index');
              }else{
                confirm_disabled.value = false
                ElMessage.error("密码错误！");
                return false
              }
            })
          }else{
            console.log(res.data)
            confirm_disabled.value = false
            ElMessage.error(res.data.msg);
            return false
          }
        })
      } else {
        console.log("表单验证失败")
        confirm_disabled.value = false;
        return false
      }
    })
  };
</script>

<template>
  <div class="loginBody">
    <div class="loginDiv">
      <div class="login-content">
        <h1 class="login-title">用户登录</h1>
        <el-form :model="loginForm" label-width="100px"
                 :rules="rules" ref="loginFormRef">
          <el-form-item label="账号" prop="no">
            <el-input v-model="loginForm.no"
                      autocomplete="off" size="small" @keyup.enter.native="confirm"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input type="password" v-model="loginForm.pwd"
            show-password autocomplete="off" size="small" @keyup.enter.native="confirm"></el-input>
          </el-form-item>
          <el-form-item label="验证">
            <img :src="httpUrl + '/captcha/get'" alt="captcha" style="height: 20px; width: 80px; margin-bottom: 20px">
            <el-input v-model="userInput" type="text" placeholder="请输入验证码(30s有效)" @keyup.enter.native="confirm" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="confirm" :disabled="confirm_disabled">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .loginBody {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #B3C0D1;
    background-image: url("../assets/img/mM.jpg");
  }
  .loginDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
    width: 450px;
    height: 400px;
    background: #fff;
    border-radius: 5%;
  }
  .login-title {
    margin: 20px;
    text-align: center;
  }
  .login-content {
    width: 400px;
    height: 250px;
    position: absolute;
    top: 25px;
    left: 25px;
  }
</style>